// subPages/health/composition/composition.js
import * as echarts from '../../../ec-canvas/echarts';
var util =  require('../../../utils/util.js');
var navListJson = require('../../../data/navListJson');
let LineChart = null
const app = getApp()

// 1体脂率  2水分率  3bmi  4基础代谢  5肌肉量  6骨量  7蛋白质  8内脏脂肪  
Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentTab: 0,
    ec: {
      // lazyLoad: true // 延迟加载
    },
    time: 1
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    if(options.name){
      that.setData({
        name: options.name,
        navList: navListJson.dateNaveList,
      })
      that.getType(options.name)
      that.getData(that.data.time)
      that.getIntroduce(that.data.type)
    }
  },

  //转换类型
  getType:function(name){
    var that = this
    var type = ''
    switch (name) {
      case '体脂率':
        type = 1
        break;
      case '水分率':
        type = 2
        break;
      case 'BMI':
        type = 3
        break;
      case '基础代谢':
        type = 4
        break;
      case '体肌肉量':
        type = 5
        break;
      case '骨矿含量':
        type = 6
        break;
      case '体蛋白质':
        type = 7
        break;
      case '内脏脂肪':
        type = 8
        break;
      case '生理年龄':
        type = 9
        break;
    }
    that.setData({
      type: type
    })
  },

  //获得介绍
  getIntroduce:function(type){
    var that = this
    var introduce = ''
    var scope = ''
    switch (type) {
      case 1:
        introduce = '体脂率是指人体内脂肪重量在人体总体重中所占的比例，又称体脂百分数，它反映人体内脂肪含量的多少。肥胖会提高罹患各种疾病的风险。'
        scope = '成年人的体脂率正常范围分别是女性20%～25%，男性15%～18%，若体脂率过高，体重超过正常值的20%以上就可视为肥胖。运动员的体脂率可随运动项目而定。一般男运动员为7%～15%，女运动员为12%—25%。'
        break;
      case 2:
        introduce = '身体水分占体重的百分比，此数据和肌肉量有着极其密切的关系，因为肌肉中含大量水分(大概70%)，这项指标能够反应减重的方式是否正确，如果体水分率下降，不但有损健康，更会令体脂肪率上升。'
        scope = '成年人人体内水分约占人体重的60％－70%。\n其中脑脊髓中水占99%、淋巴腺中水占94%、血液中水占70%、肌肉中水占62%、骨骼中水占5%。\n当胎儿在母体内孕育的时候，水占体重的90%，当婴儿出生后，水占体重的80%，成年人体内水的比例降到了70%，而到了老年以后，水在人体内的比例就降到了50%---60%。\n水约占人体组成的70%。\n男性体内含水分较女性多，年轻的人较年长者多，新生儿体内所含水量约为70%~75%。在人体各组织中，水分的含量也是不同的：分布于骨骼和软骨中的水约占骨总量的10%；脂肪当中的水约占脂肪总量的20%~35%；肌肉中水的分布已高达肌肉总量的70%左右；而血液中的血浆里面，除了6%~8%的血浆蛋白，0.1%左右的葡萄糖和0.9%左右的无机盐以外，其余的成分全是水，约占血浆总量的91%~92%。'
        break;
      case 3:
        introduce = 'BMI指数是用体重公斤数除以身高米数平方得出的数字，是目前国际上常用的衡量人体胖瘦程度以及是否健康的一个标准。主要用于统计用途，当我们需要比较及分析一个人的体重对于不同高度的人所带来的健康影响时，BMI值是一个中立而可靠的指标。'
        scope = '过轻：低于18.5\n正常：18.5-23.9\n过重：24-27\n肥胖：28-32'
        break;
      case 4:
        introduce = '基础代谢(basal metabolism,BM)是指人体维持生命的所有器官所需要的最低能量需要。测定方法是在人体在清醒而又极端安静的状态下，不受肌肉活动、环境温度、食物及精神紧张等影响时的能量代谢率。'
        scope = '基础代谢率随着性别、年龄等不同而有生理变动。男子的基础代谢率平均比女子高，幼年比成年高；年龄越大，代谢率越低。一般来说，基础代谢率的实际数值与正常的平均值相差10－15%之内都 属于正常。超过正常值20%时，才能算病理状态。甲状腺机能减退时，基础代谢率比正常标准低20－40%；甲状腺功能亢进时，基础代谢率比正常标准高出25-80%。其他如肾上腺皮质和脑下垂体机能低下时，基础代谢率也要降低。'
        break;
      case 5:
        introduce = '可以测量出人体脂肪的含量，帮助用户更好地了解自己的体脂含量，达到减肥的目的。'
        scope = '低：（男性）低于25%（女性）低于30%\n标准：（男性）25%-27%（女性）31%-34%\n偏高：（男性）28%-29%（女性）35%-38%\n高：（男性）高于30%（女性）高于39%'
        break;
      case 6:
        introduce = '是骨骼强度的一个重要指标，以克/每平方厘米表示，是一个绝对值。'
        scope = '在临床使用骨密度值时由于不同的骨密度检测仪的绝对值不同，通常使用T值判断骨密度是否正常。T值是一个相对值，正常参考值在-1和1之间。当T值低于-2.5时为不正常。'
        break;
      case 7:
        introduce = '蛋白质是组成人体一切细胞、组织的重要成分。机体所有重要的组成部分都需要有蛋白质的参与。一般说，蛋白质约占人体全部质量的18%，最重要的还是其与生命现象有关。'
        scope = '白蛋白正常值通常是人不同阶段其值不同：新生儿白蛋白正常值28～44g／L；14岁后白蛋白正常值38～54g／L；成人白蛋白正常值 35～50g／L；60岁后白蛋白正常值34～48g／L。\n血清球蛋白是机体免疫器官制造的,球蛋白正常值为20-30 g/L.球蛋白大部分在肝细胞外生成,与人体的免疫力有关系。对于血清球蛋白是机体免疫器官制造的,球蛋白正常值为20-30 g/L.球蛋白大部分在肝细胞外生成,与人体的免疫力有关系'
        break;
      case 8:
        introduce = '内脏脂肪是人体脂肪中的一种。它与皮下脂肪（也就是我们平时所了解的身体上可以摸得到的“肥肉”） 不同，它围绕着人的脏器，主要存在于腹腔内。内脏脂肪对于我们的健康意义重大。'
        scope = '正常：1-9kg\n偏高：10-14kg\n高：15-29kg\n很高：高于30kg'
        break;
      case 9:
        introduce = '生理年龄亦称“生物年龄”。泛指人达到某一时序年龄时生理和其功能所反映出来的水平，即与一定时序年龄相对应的生理及其功能的表现程度。是从医学、生物学的角度来衡量的年龄。它表示人的成长、成熟或衰老的程度，是一个人身体状况的年龄表现。影响生理年龄的主要因素是遗传因子、遗传因子的性质和发挥作用的结果'
        scope = '生理年龄=实际年龄+（不良习惯导致的加分-良好习惯带来的减分）×年龄参数'
        break;
    }
    that.setData({
      introduce: introduce,
      scope: scope
    })
  },

  //获得数据
  getData:function(time){
    var that = this
    wx.request({
      url: app.globalData.apiUrl +'/get_user_content',
      data: {
        userid: app.globalData.userId,
        time: time,
        type: that.data.type //类型
      },
      method: 'get',
      header: {
        'content-type': 'application/json' //默认值
      },
      success: function (res) {
        // console.log(res)
        if(res.data.code == '200'){
          that.processingEchartData(res.data.data);
        }else{
          util.showModal('提示','数据异常')
          return;
        }
      },
      fail: function (res) {
        console.log("失败",res);
      }
    })
  },
  
  //获取图表数据
  processingEchartData:function(list){
    var that = this
    if(list && list.length != 0){
      var echartTime = []
      var dataList = []
      for(var i in list){
        echartTime.push(list[i].createtime)
        let data = list[i].zhi?list[i].zhi : 0
        dataList.push(data)
      }
      that.setData({
        isData: true,        
        dataList: dataList,
        echartTime: echartTime,
        createtime: list[list.length-1].createtime
      })
      that.linechartsComponnet = that.selectComponent('#mychartLine');
      LineChart = null
      that.getLineGraphData();  //创建图表
    }else{
      that.setData({
        isData: false,
        tipTxt: {
          tipTxt: '暂无测量数据',
          tipImg: '/resources/index/noData.png'
        }
      })
    }
  },

  //线图表
  getLineGraphData:function(){
    var that = this
    if (!LineChart){
      that.init_LineEcharts(); //初始化图表
    }else{
      that.setLineOption(); //更新数据
    }
  },

  //初始化图表
  init_LineEcharts: function () {
    var that = this
    that.linechartsComponnet.init((canvas, width, height) => {
      // 初始化图表
      LineChart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      LineChart.showLoading({
        text : '正在努力的读取数据中...'
      });
      // Chart.setLineOption(this.getLineOption());
      that.setLineOption();
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return LineChart;
    });
  },

  setLineOption: function () {
    LineChart.clear();  // 清除
    LineChart.setOption(this.getLineOption());  //获取新数据
  },

  //设置折线图表
  getLineOption: function () {
    var that = this
    // 指定图表的配置项和数据
    var option = {
      title : {
        text: '',
        subtext: ''
      },
      grid:{ 
        borderWidth:0,
        x:0,
        y:30,
        x2:0,
        y2:0,
        containLabel: true
      },
      xAxis: { 
        type: 'category',
        show:true,
        boundaryGap:true,
        data : that.data.echartTime,
        axisLine:{
          show:true,
          lineStyle:{
            color: 'white',
            width: 1,
          }
        },
        axisTick:{
          show:false
        },
        axisLabel:{
          show:true,
          color: 'white',
          interval: 0,
          formatter: '{value}',
          formatter:function(value){
            return util.setTime15(value)
          }
        },
      },
      yAxis: {
        type: 'value',
        boundaryGap:false,
        show:true,
        scale: false,
        splitNumber:2,
        axisLine:{
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine:{
          show:true,
          lineStyle:{
            color: 'rgba(255,255,255,0.3)',
          }
        },
        axisLabel:{
          show: true,
          inside: true,
          verticalAlign: 'bottom',
          margin: 0,
          color: '#76ebdc',
          formatter:function(value,index){
            return value
          }
        },
      },
      dataZoom:[
        {
          show: false,
          type:'slider',
          start: util.dataZoom(that.data.echartTime),
          end: 100,
          left:'3%',
          right:'3%',
          maxValueSpan: 10,
        },
        {
          type: 'inside',
        },
      ],
      series : [{
        name:'',
        type:'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 12,
        itemStyle : {
          normal: {
            color: '#fff',
          },
        },
        emphasis:{
          label:{
            show: true,
            position: 'top',
            formatter:function(params){
              return params.data;
            }
          },
          itemStyle:{
            borderWidth: 12,
            borderType:'solid',
            borderColor: 'rgba(255,255,255,0.5)'
          }
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: 'rgba(255,255,255,0)' // 0% 处的颜色
            }, {
                offset: 1, color: 'rgba(255,255,255,0.2)' // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
          }
        },
        data: that.data.dataList
      }]
    };
    LineChart.hideLoading()
    return option;
  },

  //选择导航栏
  switchNav(event){
    var that = this
    var cur = event.currentTarget.dataset.current;      
    if (that.data.currentTab == cur) {
      return false;
    } else {
      that.setData({
          currentTab: cur
      })
      that.setEchartsData(cur);
    }
  },

  //给图表赋值
  setEchartsData:function(cur){
    var that = this
    var time =''
    switch (cur) {
      case 0:
        time = 1
        break;
      case 1:
        time = 2
        break;
    }
    that.getData(time)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    LineChart = null
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    LineChart = null
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: 'PAPN健康管理',
      path: 'pages/index/index',
      success: function(res) {
        // res.shareTickets 
      },
      fail: function(res) {
          console.log(res)
      }
    }
  }
})